<template>
  <div>
    <h1>填写留言</h1>
    <br />
    <br />
    <br />
    <div class="main">
      <Steps :current="current">
        <Step title="填写信息"> </Step>
        <Step title="填写留言内容"></Step>
        <Step title="留言成功"></Step>
      </Steps>
      <br />
      <Form
        :model="userForm"
        ref="userForm"
        :rules="userFormRule"
        :label-width="80"
        v-show="f"
      >
        <FormItem label="名称" prop="username">
          <Input
            v-model="userForm.username"
            placeholder="please enter your name"
          ></Input>
        </FormItem>
        <FormItem label="邮箱地址" prop="userEmail">
          <Input
            v-model="userForm.userEmail"
            placeholder="please enter your email"
          ></Input>
        </FormItem>
      </Form>
      <Form
        :model="userContent"
        ref="userContent"
        :rules="userContentRule"
        :label-width="80"
        v-show="s"
      >
        <FormItem label="留言内容" prop="content">
          <Input
            v-model="userContent.content"
            type="textarea"
            placeholder="Enter something..."
          ></Input>
        </FormItem>
      </Form>
      <div v-show="t" style="text-align: center">
        <Icon type="ios-checkmark-circle-outline" size="200" color="#19BE6B" />
        <br />
        <h4>作者会在24小时回复信息到您的邮箱 如到时间没回复就不会回复</h4>
        <br />
        <Card>
          <p>留言姓名：{{ userForm.username }}</p>
          <p>留言邮箱：{{ userForm.userEmail }}</p>
          <p>留言内容：{{ userContent.content }}</p>
          <p>Everything Happens for a Reason</p>
        </Card>
        <br />
      </div>
      <Button type="primary" @click="next" class="btn" v-show="f"
        >下一步</Button
      >
      <Button type="primary" @click="Submit" class="btn" v-show="s"
        >提交</Button
      >
      <Button type="info" @click="goback" class="btns" v-show="s"
        >上一步</Button
      >
      <Button type="info" @click="gomain" class="btns" v-show="t"
        >再留一条</Button
      >
      <br />
    </div>
    <Divider />
    <h1>进度查询</h1>
    <div class="main">
      <Input
        placeholder="请输入需要查询的邮箱"
        v-model="checkEmail"
        style="width: 320px"
        clearable
        @on-clear="cleard"
      ></Input>
      <Button type="success" @click="searchEmail">搜素</Button>
      <List item-layout="vertical">
        <ListItem v-for="item in replyedData" :key="item.id">
          <p>留言姓名：{{ item.username }}</p>
          <br />
          <p>留言邮箱：{{ item.userEmail }}</p>
          <br />
          <p>留言内容：{{ item.content }}</p>
          <br />
          <p>回复内容：{{ item.replied }}</p>
        </ListItem>
      </List>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      checkEmail: '',
      s: false,
      f: true,
      t: false,
      replyedData: [],
      userContent: {
        content: ''
      },
      userForm: {
        username: '',
        userEmail: ''
      },
      userContentRule: {
        content: {
          required: true,
          message: 'The message cannot be empty'
        }
      },
      userFormRule: {
        username: [
          {
            required: true,
            message: 'The name cannot be empty',
            trigger: 'blur'
          }
        ],
        userEmail: [
          {
            required: true,
            message: 'Mailbox cannot be empty',
            trigger: 'blur'
          },
          { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
        ]
      },
      current: 0
    }
  },
  methods: {
    cleard() {
      this.replyedData = []
    },
    searchEmail() {
      if (this.checkEmail === '' || this.checkEmail === null) {
        this.$Message.error('请输入需要查询的邮箱')
      } else {
        axios.get(`/liz/checkEmail/${this.checkEmail}`).then((res) => {
          if (res.data.data.length === 0) {
            this.$Message.error('未查到此邮箱的留言')
          } else {
            this.replyedData = res.data.data
          }
        })
      }
    },
    goback() {
      this.current -= 1
      this.s = false
      this.f = true
    },
    Submit() {
      this.$refs.userContent.validate((valid) => {
        if (valid) {
          const params = new URLSearchParams()
          params.append('username', this.userForm.username)
          params.append('userEmail', this.userForm.userEmail)
          params.append('content', this.userContent.content)
          axios.post('/liz/addAnthor_message', params).then((res) => {
            if (res.data.status === 200) {
              this.$Message.success('新增成功')
              this.current += 1
              this.s = false
              this.t = true
            } else {
              this.$Message.error(res.data.message)
            }
          })
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    gomain() {
      this.current = 0
      this.t = false
      this.f = true
      this.$refs.userForm.resetFields()
    },
    next() {
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          if (this.current === 2) {
            this.current = 0
          } else {
            this.current += 1
          }
          this.f = false
          this.s = true
        } else {
          this.$Message.error('Fail!')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  // text-align: center;
  margin: 0 auto;
  width: 500px;
}
Input {
  width: 320px;
}
.btn {
  position: absolute;
  left: 46%;
}
.btns {
  position: absolute;
  left: 52%;
}
</style>
